<template>
  <header>
    <div class="container">
      <!-- nav -->
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="logo">
              <el-image style="width: 210px; height: 40px;" :src="require('@/assets/images/clplogo.png')" :fit="fill" />
            </div>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div
            class="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1"
          >
            <ul class="nav navbar-nav">
              <li :class="currentRoute.name === 'Home' ? 'active' : ''">
                <a href="/">Home</a>
              </li>
              <li :class="currentRoute.name === 'about' ? 'active' : ''">
                <a href="about">About</a>
              </li>
              <li :class="currentRoute.name === 'properties' ? 'active' : ''">
                <a href="properties">Properties</a>
              </li>
              <li :class="currentRoute.name === 'blog' ? 'active' : ''">
                <a href="blog">Blog</a>
              </li>
              <li :class="currentRoute.name === 'contact' ? 'active' : ''">
                <a href="contact">Contact</a>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
      <!-- //nav -->
    </div>
  </header>
  <!-- //header -->
</template>

<script>
import { useRouter } from "vue-router";
export default {
  name: "Header",
  setup() {
    const router = useRouter();
    const { currentRoute } = router;
    const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
    console.log(currentRoute);
    return {
      currentRoute,
      fits
    };
  },
};
</script>
<style scoped>
  .demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
  }
  .demo-image .block:last-child {
    border-right: none;
  }
  .demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
